<template>
  <div class="home">
    <div>
      <p>count: {{ count }}</p>
      <button @click="add">改数据</button>
      <button @click="updatedNmae">改数据2</button>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { ref, watch, reactive } from 'vue'
export default {
  name: 'Test',
  setup() {
    console.log(ref)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    // 监听一个属性 监听多个属性count 换成数组 [count1,count2,...]
    watch(count, (n, prevCount) => {
      /* ... */
      console.log(n, prevCount, '一个')
    })

    const obj = reactive({
      age: 18,
      name: 'ls'
    })
    const updatedNmae = () => {
      obj.name = 'zs'
    }
    // 监听一个对象  深度监听 deep
    watch(() => obj, (n, prevCount) => {
      /* ... */
      console.log('监听一个对象')
    }, { deep: true })

    return { count, add, updatedNmae, obj }
  },
  components: {

  }
}
</script>
